<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    h4
    {
        margin: 0px;
    }
    *
    {
      text-align: center;
    }
    section
    {
        margin-top: 10px;
        display: flex;
        justify-content: space-around
    }
    </style>
</head>

<body>
    <script src="template.js"></script>
    
     
    <script id="weather" type="text/html">
     <h1>{{title}}</h1>
     {{if messages.length == 0 }}
     <div>没有查询到任何天气情况</div>
     {{else}}
     {{each messages as message}}
     <section><h3>{{message.city}}</h3>
      {{each message.weathers as weather}}
      <div style="margin-top:10px">
        <h4>{{weather.day}}</h4>
        <h4>{{weather.temp1}}</h4>
         <h4>{{weather.temp2}}</h4>
          <h4>{{weather.weather}}</h4>
           <time>{{weather.ptime}}</time>
      </div>
      {{/each}}
      </section>
     {{/each}}
   
     {{/if}}
     </script>
<script>
       var data = {
            status: 200,
            title: '中国天气预报',
            messages: [
                {
                    city: '北京',
                    weathers: [
                        {
                            day: 'Monday',
                            temp1: '29℃',
                            temp2: '19℃',
                            weather: '晴',
                            ptime: '11:00'
                        }
                        ,
                        {
                            day: 'Tuesday',
                            temp1: '29℃',
                            temp2: '19℃',
                            weather: '晴转多云',
                            ptime: '11:00'
                        }
                        ,
                        {
                            day: 'Wednesday',
                            temp1: '29℃',
                            temp2: '19℃',
                            weather: '雨夹雪',
                            ptime: '11:00'
                        }
                        ,
                        {
                            day: 'Thursday',
                            temp1: '29℃',
                            temp2: '19℃',
                            weather: '小雪转大雪',
                            ptime: '11:00'
                        }
                        ,
                        {
                            day: 'Friday',
                            temp1: '29℃',
                            temp2: '19℃',
                            weather: '多云',
                            ptime: '11:00'
                        }
                        ,
                        {
                            day: 'Satyrday',
                            temp1: '29℃',
                            temp2: '19℃',
                            weather: '晴转多云',
                            ptime: '11:00'
                        }
                        ,
                        {
                            day: 'Sunday',
                            temp1: '29℃',
                            temp2: '19℃',
                            weather: '晴',
                            ptime: '11:00'
                        }

                    ]

                },
                {
                    city: '石家庄',
                    weathers: [
                        {
                            day: 'Monday',
                            temp1: '29℃',
                            temp2: '19℃',
                            weather: '晴',
                            ptime: '11:00'
                        }
                        ,
                        {
                            day: 'Tuesday',
                            temp1: '29℃',
                            temp2: '19℃',
                            weather: '晴转多云',
                            ptime: '11:00'
                        }
                        ,
                        {
                            day: 'Wednesday',
                            temp1: '29℃',
                            temp2: '19℃',
                            weather: '雨夹雪',
                            ptime: '11:00'
                        }
                        ,
                        {
                            day: 'Thursday',
                            temp1: '29℃',
                            temp2: '19℃',
                            weather: '小雪转大雪',
                            ptime: '11:00'
                        }
                        ,
                        {
                            day: 'Friday',
                            temp1: '29℃',
                            temp2: '19℃',
                            weather: '多云',
                            ptime: '11:00'
                        }
                        ,
                        {
                            day: 'Satyrday',
                            temp1: '29℃',
                            temp2: '19℃',
                            weather: '晴转多云',
                            ptime: '11:00'
                        }
                        ,
                        {
                            day: 'Sunday',
                            temp1: '29℃',
                            temp2: '19℃',
                            weather: '晴',
                            ptime: '11:00'
                        }

                    ]

                },
                {
                    city: '郑州',
                    weathers: [
                        {
                            day: 'Monday',
                            temp1: '29℃',
                            temp2: '19℃',
                            weather: '晴',
                            ptime: '11:00'
                        }
                        ,
                        {
                            day: 'Tuesday',
                            temp1: '29℃',
                            temp2: '19℃',
                            weather: '晴转多云',
                            ptime: '11:00'
                        }
                        ,
                        {
                            day: 'Wednesday',
                            temp1: '29℃',
                            temp2: '19℃',
                            weather: '雨夹雪',
                            ptime: '11:00'
                        }
                        ,
                        {
                            day: 'Thursday',
                            temp1: '29℃',
                            temp2: '19℃',
                            weather: '小雪转大雪',
                            ptime: '11:00'
                        }
                        ,
                        {
                            day: 'Friday',
                            temp1: '29℃',
                            temp2: '19℃',
                            weather: '多云',
                            ptime: '11:00'
                        }
                        ,
                        {
                            day: 'Satyrday',
                            temp1: '29℃',
                            temp2: '19℃',
                            weather: '晴转多云',
                            ptime: '11:00'
                        }
                        ,
                        {
                            day: 'Sunday',
                            temp1: '29℃',
                            temp2: '19℃',
                            weather: '晴',
                            ptime: '11:00'
                        }

                    ]

                },
                {
                    city: '武汉',
                    weathers: [
                        {
                            day: 'Monday',
                            temp1: '29℃',
                            temp2: '19℃',
                            weather: '晴',
                            ptime: '11:00'
                        }
                        ,
                        {
                            day: 'Tuesday',
                            temp1: '29℃',
                            temp2: '19℃',
                            weather: '晴转多云',
                            ptime: '11:00'
                        }
                        ,
                        {
                            day: 'Wednesday',
                            temp1: '29℃',
                            temp2: '19℃',
                            weather: '雨夹雪',
                            ptime: '11:00'
                        }
                        ,
                        {
                            day: 'Thursday',
                            temp1: '29℃',
                            temp2: '19℃',
                            weather: '小雪转大雪',
                            ptime: '11:00'
                        }
                        ,
                        {
                            day: 'Friday',
                            temp1: '29℃',
                            temp2: '19℃',
                            weather: '多云',
                            ptime: '11:00'
                        }
                        ,
                        {
                            day: 'Satyrday',
                            temp1: '29℃',
                            temp2: '19℃',
                            weather: '晴转多云',
                            ptime: '11:00'
                        }
                        ,
                        {
                            day: 'Sunday',
                            temp1: '29℃',
                            temp2: '19℃',
                            weather: '晴',
                            ptime: '11:00'
                        }

                    ]

                },
                 {
                    city: '上海',
                    weathers: [
                        {
                            day: 'Monday',
                            temp1: '29℃',
                            temp2: '19℃',
                            weather: '晴',
                            ptime: '11:00'
                        }
                        ,
                        {
                            day: 'Tuesday',
                            temp1: '29℃',
                            temp2: '19℃',
                            weather: '晴转多云',
                            ptime: '11:00'
                        }
                        ,
                        {
                            day: 'Wednesday',
                            temp1: '29℃',
                            temp2: '19℃',
                            weather: '雨夹雪',
                            ptime: '11:00'
                        }
                        ,
                        {
                            day: 'Thursday',
                            temp1: '29℃',
                            temp2: '19℃',
                            weather: '小雪转大雪',
                            ptime: '11:00'
                        }
                        ,
                        {
                            day: 'Friday',
                            temp1: '29℃',
                            temp2: '19℃',
                            weather: '多云',
                            ptime: '11:00'
                        }
                        ,
                        {
                            day: 'Satyrday',
                            temp1: '29℃',
                            temp2: '19℃',
                            weather: '晴转多云',
                            ptime: '11:00'
                        }
                        ,
                        {
                            day: 'Sunday',
                            temp1: '29℃',
                            temp2: '19℃',
                            weather: '晴',
                            ptime: '11:00'
                        }

                    ]

                }
                ,
                 {
                    city: '苏州',
                    weathers: [
                        {
                            day: 'Monday',
                            temp1: '29℃',
                            temp2: '19℃',
                            weather: '晴',
                            ptime: '11:00'
                        }
                        ,
                        {
                            day: 'Tuesday',
                            temp1: '29℃',
                            temp2: '19℃',
                            weather: '晴转多云',
                            ptime: '11:00'
                        }
                        ,
                        {
                            day: 'Wednesday',
                            temp1: '29℃',
                            temp2: '19℃',
                            weather: '雨夹雪',
                            ptime: '11:00'
                        }
                        ,
                        {
                            day: 'Thursday',
                            temp1: '29℃',
                            temp2: '19℃',
                            weather: '小雪转大雪',
                            ptime: '11:00'
                        }
                        ,
                        {
                            day: 'Friday',
                            temp1: '29℃',
                            temp2: '19℃',
                            weather: '多云',
                            ptime: '11:00'
                        }
                        ,
                        {
                            day: 'Satyrday',
                            temp1: '29℃',
                            temp2: '19℃',
                            weather: '晴转多云',
                            ptime: '11:00'
                        }
                        ,
                        {
                            day: 'Sunday',
                            temp1: '29℃',
                            temp2: '19℃',
                            weather: '晴',
                            ptime: '11:00'
                        }

                    ]

                }
                ,
                 {
                    city: '青岛',
                    weathers: [
                        {
                            day: 'Monday',
                            temp1: '29℃',
                            temp2: '19℃',
                            weather: '晴',
                            ptime: '11:00'
                        }
                        ,
                        {
                            day: 'Tuesday',
                            temp1: '29℃',
                            temp2: '19℃',
                            weather: '晴转多云',
                            ptime: '11:00'
                        }
                        ,
                        {
                            day: 'Wednesday',
                            temp1: '29℃',
                            temp2: '19℃',
                            weather: '雨夹雪',
                            ptime: '11:00'
                        }
                        ,
                        {
                            day: 'Thursday',
                            temp1: '29℃',
                            temp2: '19℃',
                            weather: '小雪转大雪',
                            ptime: '11:00'
                        }
                        ,
                        {
                            day: 'Friday',
                            temp1: '29℃',
                            temp2: '19℃',
                            weather: '多云',
                            ptime: '11:00'
                        }
                        ,
                        {
                            day: 'Satyrday',
                            temp1: '29℃',
                            temp2: '19℃',
                            weather: '晴转多云',
                            ptime: '11:00'
                        }
                        ,
                        {
                            day: 'Sunday',
                            temp1: '29℃',
                            temp2: '19℃',
                            weather: '晴',
                            ptime: '11:00'
                        }

                    ]

                }
                ,
                 {
                    city: '天津',
                    weathers: [
                        {
                            day: 'Monday',
                            temp1: '29℃',
                            temp2: '19℃',
                            weather: '晴',
                            ptime: '11:00'
                        }
                        ,
                        {
                            day: 'Tuesday',
                            temp1: '29℃',
                            temp2: '19℃',
                            weather: '晴转多云',
                            ptime: '11:00'
                        }
                        ,
                        {
                            day: 'Wednesday',
                            temp1: '29℃',
                            temp2: '19℃',
                            weather: '雨夹雪',
                            ptime: '11:00'
                        }
                        ,
                        {
                            day: 'Thursday',
                            temp1: '29℃',
                            temp2: '19℃',
                            weather: '小雪转大雪',
                            ptime: '11:00'
                        }
                        ,
                        {
                            day: 'Friday',
                            temp1: '29℃',
                            temp2: '19℃',
                            weather: '多云',
                            ptime: '11:00'
                        }
                        ,
                        {
                            day: 'Satyrday',
                            temp1: '29℃',
                            temp2: '19℃',
                            weather: '晴转多云',
                            ptime: '11:00'
                        }
                        ,
                        {
                            day: 'Sunday',
                            temp1: '29℃',
                            temp2: '19℃',
                            weather: '晴',
                            ptime: '11:00'
                        }

                    ]

                }

            ]
        }

        var html = template('weather', data)
        document.body.innerHTML = html;

    </script>
</body>

</html>